<template>
    <view class="myInfo">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <f-navbar title="会员中心" fontColor="#fff" :bgColor="PrimaryColor" :scrollTop="scrollTop" navbarType='5' :isShowLeft="false" ></f-navbar>
        <view class="headBox" :style="{background:'linear-gradient(to left top,'+PrimaryColor+','+freeSpecsButtonBackground+')',paddingTop:systemInfo.navBarH+'px'}">
            <!-- #ifdef MP -->
            <!-- 登录 -->
            <!-- <view class="u-flex u-p-l-30 u-p-r-20  u-p-b-30 user-bg" :style="{background:'none'}"> -->
			<view class="u-flex u-p-l-30 u-p-r-20  u-p-b-30 user-bg" >
            	<block v-if="userInfo.token">
            		<view class="u-m-r-20">
                        <image class="avatar" mode="aspectFill" :src="ossUrl+userInfo.avatarUrl"></image>
                    </view>
            		<view class="u-flex-1" @click="onAuthorization">
            			<view class="nickName u-flex">
                            <view class="name u-m-r-10" v-if="userInfo.nickName">{{userInfo.nickName}}</view>
                            <!-- <view class="placardVip">超级vip</view> -->
                        </view>
            			<view class="detail" v-if="userInfo.phoneNum">{{userInfo.phoneNum}}</view>
                        <view class="detail" v-else>手机号:未绑定</view>
            		</view>
            	</block>
                <block v-else>
                	<view class="u-m-r-20">
                        <view class="avatar u-flex" style="justify-content: center;">
                            <u-icon name="account-fill" color="#fff" size="30"></u-icon>
                        </view>
                    </view>
                	<view class="u-flex-1" @click="openLogin">
                        <view class="u-font-lg" style="font-weight: bold;">请点击登录</view>
                        <view class="detail">登录后享受更好的服务体验</view>
                    </view>
                </block>
            	<!-- <view><u-icon name="arrow-right" color="#fff" size="13"></u-icon></view> -->
				<block v-if="userInfo.token">
					<view @click="onJump('/pages/user/set')" style="margin-right: 36rpx;margin-top: 16rpx;"><image class="sub_btn" mode="aspectFill" src="/static/btn.png"></image></view>
				</block>
			</view>
            <!-- #endif -->
            <!-- #ifndef MP -->
            <!-- 登录 -->
            <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30 ">
            	<block v-if="userInfo.token">
            		<view class="u-m-r-20">
                        <image class="avatar" mode="aspectFill" :src="userInfo.headLogo"></image>
                    </view>
            		<view class="u-flex-1" @click="onJump('/pages/user/set')">
            			<view class="nickName">{{userInfo.userName}}</view>
            			<view class="detail" v-if="userInfo.phoneNum">手机号：{{userInfo.phoneNum | phone}}</view>
            			<view class="detail" v-else>手机号:未绑定</view>
            		</view>
            	</block>
                <block v-else>
                	<view class="u-m-r-20">
                        <view class="avatar u-flex" style="justify-content: center;">
                            <u-icon name="account-fill" color="#fff" size="30"></u-icon>
                        </view>
                    </view>
                	<view class="u-flex-1" @click="openLogin">
                        <view class="u-font-lg" style="color: #fff;font-weight: bold;">登录 / 注册</view>
                        <view class="detail">登录后享受更好的服务体验</view>
                    </view>
                </block>
            	<!-- <view><u-icon name="arrow-right"  size="13"></u-icon></view> -->
				
				<view><image class="avatar" mode="aspectFill" :src="ossUrl+userInfo.avatarUrl"></image></view>

            </view>
            <!-- #endif -->
            <!-- 会员卡 -->
<!--            <view class="vipBox">
                <view class="card">
                    <view class="left">
                        <view class="title">VIP</view>
                        <view class="tips" v-if="isVIP">尊贵的会员，您好！</view>
                        <view class="tips" v-else>成为会员，享受更好的服务体验~</view>
                    </view>
                    <view class="right">
                        <view class="button" v-if="isVIP">会员中心</view>
                        <view class="button" v-else>成为会员</view>
                    </view>
                </view>
            </view> -->
        </view>
        <view class="main">
            <view class="itemBox" @click="onTokenJump('pages/order/order')">
                <view class="titleBox u-flex">
                    <view class="title u-flex-m">邀请进度</view>
                   <view class="word">{{gift_name}}</view>
                    <!-- <u-icon name="arrow-right" :size="13" color="#999"></u-icon> -->
                </view>
                <!-- <u-grid :col="5" :border="false">
                    <u-grid-item v-for="(item,index) in order" :key="index">
                        <view class="u-flex u-p-t-30 u-p-b-30" style="flex-direction: column;justify-content: center;">
                            <u-icon :name="item.icon" :size="28" :color="PrimaryColor"></u-icon>
                            <view class="grid-text">{{item.word}}</view>
                        </view>
                    </u-grid-item>
                </u-grid> -->

					<!-- <view class="mid-avatar" >
						<image class="avatar" mode="aspectFill" :src="ossUrl+userInfo.avatarUrl"></image>
					</view> -->
			<view  class="invite-bg">
				<view style="display: flex;">
					<view>
						<view class="stars-fill">
							<view style="display: flex;" v-for="(item,index) in stars[0]">
								<u-icon class="icon-item" :name="item.name" :color="item.color" size="42"></u-icon>
								<view style="width: 20rpx;"></view>
							</view>
						</view>
						<view style="margin-top: 50rpx;color: #FF5C61;font-size: 20rpx;text-align: center;">{{gift_name}}进行中</view>
						<view class="stars">
							<view style="display: flex;" v-for="(item,index) in stars[2]">
								<u-icon class="icon-item" :name="item.name" :color="item.color" size="42"></u-icon>
								<view style="width: 20rpx;"></view>
							</view>
						</view>
					</view>
					<view style="margin-top: 50rpx;">
						<view  v-for="(item,index) in stars[1]">
							<u-icon class="icon-item" :name="item.name" :color="item.color" size="42"></u-icon>
							<view style="height: 25rpx;"></view>
						</view>
					</view>
					
				</view>
				<view style="display: flex;">
					<view class="gold" >
						<image class="avatar" mode="aspectFill" src="/static/gold.png"></image>
					</view>
					<view style="line-height: 100rpx;color: #777777;font-size: 24rpx;margin-left: 10rpx;">集齐星星可以直接获得奖励</view>
				</view>
				</view>
            </view>
            <view class="itemBox">
                <view class="titleBox u-flex" style="border: none;padding-bottom: 0;">
                    <view class="title">其他功能</view>
                </view>
                <u-grid :col="5" :border="false">
                    <u-grid-item v-for="(item,index) in moreFun" :key="index"  @click="navClick(item.onPlate)">
                        <view class="u-flex u-p-t-30 u-p-b-30" style="position: relative;flex-direction: column;justify-content: center;">
                            <image style="width: 100rpx;height: 100rpx;" :src="item.icon" />
                            <view class="grid-text" style="color: #666;font-size: 24rpx;">{{item.word}}</view>
                            <!-- #ifdef MP-WEIXIN -->
                            <button style="opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;" :open-type="item.word=='客服帮助'?'contact':''"></button>
                            <!-- #endif -->
                        </view>
                    </u-grid-item>
					<u-grid-item>
					    <view class="u-flex u-p-t-30 u-p-b-30" style="position: relative;flex-direction: column;justify-content: center;">
							<!-- <button style="line-height: unset;"  open-type="share"> -->
							<button style="line-height: unset;" @click="onJump('/pages/userReport/userReport')" >
					        <image style="width: 100rpx;height: 100rpx;" src="/static/share.png" />
					        <view class="grid-text" style="color: #666;font-size: 24rpx;">分享好友</view>
							</button>
					    </view>
					</u-grid-item>
					<u-grid-item v-if="is_staff ==1" @click="navClick('staff')">
					    <view class="u-flex u-p-t-30 u-p-b-30" style="position: relative;flex-direction: column;justify-content: center;">
					        <image style="width: 100rpx;height: 100rpx;" src="/static/mem.png" />
					        <view class="grid-text" style="color: #666;font-size: 24rpx;">员工端</view>
					    </view>
					</u-grid-item>

                </u-grid>
            </view>
        </view>
                
        <f-tabbar></f-tabbar>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import base from '@/config/baseUrl';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import { getAssistanceRate ,myIsStaff } from '@/config/api.js';

export default {
    components:{
        fNavbar,
        fTabbar
    },
	computed:{
	    ...mapState(['PrimaryColor','userInfo']),
		freeSpecsButtonBackground(){
			return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor),0.75)
		},
	},
    data() {
        return {
            baseUrl:base.baseUrl,
			ossUrl:base.ossUrl,
            systemInfo:base.systemInfo,
            scrollTop:0,
            isVIP:false,
			count: 5,
			value: 2,
			gift_name: '',
			stars: [[{"name":"star","color":"#EBEBEB"},{"name":"star","color":"#EBEBEB"},
			{"name":"star","color":"#EBEBEB"},
			{"name":"star","color":"#EBEBEB"}],
			[{"name":"star","color":"#EBEBEB"},{"name":"star","color":"#EBEBEB"}],
			[{"name":"star","color":"#EBEBEB"},
			{"name":"star","color":"#EBEBEB"},{"name":"star","color":"#EBEBEB"},
			{"name":"star","color":"#EBEBEB"}]],
            // 订单
            order: [{
                icon: 'rmb-circle-fill',
                word: '待付款'
            }, {
                icon: 'car-fill',
                word: '待配送'
            }, {
                icon: 'bag-fill',
                word: '待收货'
            }, {
                icon: 'chat-fill',
                word: '待评价'
            }, {
                icon: 'server-fill',
                word: '退款/售后'
            }],
            moreFun: [{
                icon: '/static/optometry.png',
                word: '验光参数',
                onPlate: 'goMyAddressList',
            }, {
                icon: '/static/cards.png',
                word: '优惠卡包',
                onPlate: 'goCashCouponList',
            }, 
            // {
            //     icon: '/static/share.png',
            //     word: '分享好友',
            //     onPlate: '',
            // }, 
            // {
            //     icon: '/minImage/funMoreIcon4.png',
            //     word: '意见反馈',
            //     onPlate: 'goFeedback',
            // }, {
            //     icon: '/minImage/funMoreIcon5.png',
            //     word: '关于我们',
            //     onPlate: 'goAbout',
            // }, 
			// {
   //              icon: '/static/mem.png',
   //              word: '员工端',
   //              onPlate: 'staff',
   //          }
			],
			is_staff:0,//是否是用户的
        }
    },
    onLoad() {
        // 隐藏原生的tabbar
        uni.hideTabBar();
		
	
    },
	onShow() {
	    uni.hideTabBar();
		this.getStars();
		this.userInfos();
	},
    methods: {
        ...mapMutations(['setLoginPopupShow']),
        onJump(url){
            uni.navigateTo({
                url:url
            })
        },
		userInfos()
		{
			var storeUserInfo = uni.getStorageSync('userInfo')
			if (!storeUserInfo.token) return
			myIsStaff({}).then((res) => {
				this.is_staff = res.data.is_staff
			}).catch((err) =>{
			})
		},
		getStars(){

			var storeUserInfo = uni.getStorageSync('userInfo')
			if (!storeUserInfo.token) return
			let httpData = {
			    store_id: this.userInfo.store_id
			}
			
			getAssistanceRate({params: httpData}).then((res) => {
				this.stars = res.stars
				this.gift_name = res.name
			}).catch((err) =>{
				console.log(err,'catch')
			})
		},
		onAuthorization(e) {
			// #ifdef MP-WEIXIN
			this.$store.commit('setShowWxLogin',true) //打开微信新授权组件
			// #endif
			// #ifdef MP-ALIPAY
		    getUserInfo(info=>{
		        console.log(info,'授权信息')
		        let httpData = {
		            code: this.code,
		            nickName: info.nickName || '', //昵称
		            avatarUrl: info.avatarUrl || '', //头像
		            gender: info.gender || '', //性别 0:未知 1:男 2:女
		        }
		        // uni.$u.http.post('您的接口', httpData).then(res => {
		            let userInfo = {
		                // ...res,
		                token:true,//token用于判断是否登录
		            }
		            // this.setUserInfo(userInfo)
		            // setTimeout(()=>{
		            //     uni.showToast({
		            //     	title: '登录成功',
		            //     	icon: 'none'
		            //     });
		            //     this.closeLogin();
		            // },100)
		        // })
		    },err=>{
		        // this.closeLogin();
		    })
			// #endif
		},
        // 跳转前判断登录
        onTokenJump(url) {
			
        	this.judgeLogin(() => {
        		uni.navigateTo({
        			url: url
        		});
        	});
        },
		onShareAppMessage(e) {
			let shareobj = {
				title: '邀请好友，天降惊喜', 
				path: '/pages/share/share?shareId=' + this.userInfo.userId + '&store_id=' + this.userInfo.store_id, 
				imageUrl: this.shareImg,  //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
			}
			return shareobj 
		},
        openLogin(){
			this.authorization();
            this.judgeLogin()
        },
        navClick(e){
            var url = ''
            if(e=='goMyAddressList'){
				this.authorization();
				uni.navigateTo({
					url: '/pages/optometryList/optometryList'
				});
            }else if(e=='goCashCouponList'){
                // this.$u.toast('您点击了我的优惠券~')
				uni.navigateTo({
					url: '/pages/cards/cards'
				});
            }else if(e=='onHelp'){
				return
				// uni.navigateTo({
				// 	url: '/pages/share/share'
				// });
				// onShareAppMessage()
                // #ifndef MP-WEIXIN
                
                // #endif
            }else if(e=='goFeedback'){
                this.$u.toast('您点击了意见反馈~')
            }else if(e=='goAbout'){
                this.$u.toast('您点击了关于我们~')
            }else if(e=='staff'){
              
				uni.redirectTo({
					url: '/staff/member/member'
				});
				
            }
            // url!='' && this.onJump(url)
        },
		
		
		//订阅消息授权
		authorization()
		{
			// let date = new Date();
			// let year = date.getFullYear();
			// let month = date.getMonth() + 1;
			// let day = date.getDate();
			// var timgx = year+'-'+ month+'-'+ day;
			// var timgc =	uni.getStorageSync('subscriber_time');
			// if(timgc != timgx)
			// {
				// 定义需要订阅的模板ID列表
				const templateIds = ['FfjkCXULs7j8AI5_aV5Dsj3q6AvrIeDPNbtlVFWBr88'] // 这里只作为示例，实际使用时应根据自己的情况修改
				// 发起订阅消息授权请求
				uni.requestSubscribeMessage({
				  tmplIds: templateIds,
				  success(res) {
					uni.setStorageSync('subscriber_time', timgx)
				  },
				  fail(err) {
				  
				  }
				})
			// }
		}
		
		
    },
    onPageScroll(e) {
    	this.scrollTop = e.scrollTop;
    },
}
</script>

<style lang="scss" scoped>
.myInfo{
    // 这里设置高度，上拉显示菜单栏---正式环境删除
    // min-height: 2000rpx;
}
.sub_btn{
	width: 154rpx;
	height: 56rpx;
}
.mid-avatar{
	margin: 0 auto;
	width: 102rpx;
    height: 102rpx;
    border-radius: 51rpx;
    background-color: #ccc;
	image {
		width: 100%;
		height: 100%;
		border-radius: 51rpx;
	}
	}
.gold{
	width: 50px;
	background-color: none;
	image {
		width: 100%;
		height: 100%;
	}
	}
.stars{
	display: flex;
	margin-top: 50rpx;
}
.u-icon {
	margin-left: 20rpx;
}
.invite-bg{
	padding-left: 30rpx;
	height: 400rpx;
	background-image: url("/static/invite.png");
	background-position: bottom right;
}
.stars-fill{
	display: flex;
}

.headBox {
    padding-top: 128rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	height: 404rpx;
    background: linear-gradient(to left top, #f32735, #fc674d);
    border-radius: 50% / 0 0 25% 25%;
    .avatar{
        width: 102rpx;
        height: 102rpx;
        border-radius: 51rpx;
        background-color: #ccc;
    }
    .nickName{
		color: #3D3D3D;
        .btn{
            font-size: 22rpx;
            font-weight: normal;
            color: #666;
            background: #fff;
            border-radius: 5rpx;
            height: 45rpx;
            line-height: 45rpx;
            padding: 0 10rpx;
            position: relative;
            .itemButton{
                border-radius: 0;
                text-align: left;
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
        .name{
            color: #3D3D3D;
            font-weight: bold;
            font-size: 32rpx;
        }
        .placardVip{
            background: #2a2e44;
            color: #f4d6a1;
            font-size: 22rpx;
            padding: 4rpx 10rpx;
            text-align: center;
            border-radius: 4rpx;
        }
        
    }

	.user-bg{ 
		background: rgba(255,255,255,0.2);
	    margin-top: 80rpx;
		padding-top: 150rpx;
		color: black;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-image: url("/static/vip.png");
		background-repeat: round;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(197.45575100183487, 255, 231.17308974266052, 1)) 2 2;
	}
    .detail{
        color: #3D3D3D;
        font-size: 24rpx;
        padding-top: 6rpx;
    }
    .vipBox {
        padding: 0 24rpx;
        .card {
            background-image: linear-gradient(to right, #314177, #202646);
            padding: 16rpx 32rpx 24rpx 32rpx;
            border-top-left-radius: 30rpx;
            border-top-right-radius: 30rpx;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                flex-direction: row;
                align-items: center;
                .title {
                    font-size: 40rpx;
                    font-weight: bold;
                    font-style: italic;
                    color: #f9bd90;
                }
                .tips {
                    font-size: 24rpx;
                    color: #f9bd90;
                    margin-left: 20rpx;
                }
                
            }
            .right {
                .button {
                    padding: 8rpx 16rpx;
                    color: 212849;
                    border-radius: 30rpx;
                    background: #f9bd90;
                    font-size: 24rpx;
                }
            }
        }
    }
}
.main {
    padding: 0 24rpx;
	margin-top: 130rpx;
}
.itemBox {
    background: #fff;
    padding: 0 24rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-top: 24rpx;
    .titleBox {
        padding: 32rpx 0;
        border-bottom: 1rpx solid #eee;
        .title {
            font-size: 28rpx;
            font-weight: bold;
        }
        .word {
            width: 128rpx;
            height: 38rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 20rpx;
            color: #FFFFFF;
			background: #79D299;
            line-height: 38rpx;
			border-radius: 62rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }
    .grid-text{
        font-size: 24rpx;
        color: #333;
        padding-top: 10rpx;
    }
}
</style>
